<template>
	<view class="Distribution-MaterialRule" @touchmove.stop.prevent v-if="isPopup">
		<view class="Distribution-MaterialRule-main" @click.prevent.stop>
			<view class="Distribution-MaterialRule-main-content">
				<view
					class="Distribution-MaterialRule-main-content-header"
					:style="{
						backgroundImage: 'url(' + titleBgImage + ')'
					}"
				>
					素材圈规则说明
				</view>

				<view class="Distribution-MaterialRule-main-content-rule">
					<view class="Distribution-MaterialRule-main-content-rule-item">
						<view class="Distribution-MaterialRule-main-content-rule-item-left">
							<image :src="leftIcon" />
							<text>1</text>
						</view>
						<view class="Distribution-MaterialRule-main-content-rule-item-right">
							每次上传素材，图片+视频不少于{{ uploadMinNum }}个，最多不超过{{ uploadMaxNum }}个
						</view>
					</view>
					<view class="Distribution-MaterialRule-main-content-rule-item">
						<view class="Distribution-MaterialRule-main-content-rule-item-left">
							<image :src="leftIcon" />
							<text>2</text>
						</view>
						<view class="Distribution-MaterialRule-main-content-rule-item-right">
							图片被下载预估收益
							<text>{{ hintParams.td_resource_rule_4 }}元/张</text>
							，视频被下载预估收益
							<text>{{ hintParams.td_resource_rule_5 }}元/份</text>
						</view>
					</view>
				</view>

				<view class="Distribution-MaterialRule-main-content-button">
					<button @click.prevent.stop="maskClosePopup">我知道了</button>
				</view>
			</view>

			<view class="Distribution-MaterialRule-main-close" v-if="isClose">
				<image @click.prevent.stop="maskClosePopup" src="@/static/icon/icon_service_close.png" />
			</view>
		</view>
	</view>
</template>

<script>
import srorageKey from '@/utils/srorage/key';
import { getResourceRule } from '@/api/material';
import { defaultImageUrl, setLocal, getLocal } from '@/utils';

const leftIcon = Object.freeze(`${defaultImageUrl}icon/img_rule_num.png`);
const titleBgImage = Object.freeze(`${defaultImageUrl}image/img_rule_title.png`);

export default {
	name: 'Distribution-MaterialRule',

	props: {
		isClose: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			leftIcon,
			titleBgImage,

			isPopup: false,

			hintParams: {
				td_resource_rule_1: '', // 图片最少数量
				td_resource_rule_2: '', // 视频最少数量

				td_resource_rule_6: '', // 图片最多数量
				td_resource_rule_7: '', // 视频最多数量

				td_resource_rule_4: '', // 图片被下载收益（元/张）
				td_resource_rule_5: '' // 视频被下载收益（元/个）
			}
		};
	},

	created() {
		const status = getLocal(srorageKey.MaterialRuleHint);

		!status && this.getRuleHintData();
	},

	computed: {
		uploadMinNum() {
			const {
				hintParams: { td_resource_rule_1, td_resource_rule_2 }
			} = this;

			return Math.min(td_resource_rule_1, td_resource_rule_2);
		},

		uploadMaxNum() {
			const {
				hintParams: { td_resource_rule_6, td_resource_rule_7 }
			} = this;

			return td_resource_rule_6 * 1 + td_resource_rule_7 * 1;
		}
	},

	methods: {
		getRuleHintData() {
			getResourceRule().then((res) => {
				const { data } = res;

				let hintParams = {};

				(data || []).forEach((item) => {
					hintParams[item.code] = item.value;
				});

				this.isPopup = true;
				this.hintParams = hintParams;
			});
		},

		maskClosePopup() {
			this.isPopup = false;
			setLocal(srorageKey.MaterialRuleHint, true);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.Distribution-MaterialRule {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1999999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: absolute;
		top: 50%;
		left: 50%;
		height: auto;
		width: calc(100vw - 128rpx);

		border-radius: 24rpx;
		transform: translate(-50%, -50%);

		&-content {
			border-radius: 24rpx;
			position: relative;
			padding: 142rpx 0 56rpx;
			background: linear-gradient(180deg, #fffaec 0%, #fff6d8 100%);

			&-header {
				position: absolute;
				top: -33rpx;
				left: 50%;
				width: 410rpx;
				height: 128rpx;
				transform: translateX(-50%);

				display: flex;
				align-items: center;
				justify-content: center;

				background-size: cover;
				background-repeat: no-repeat;

				color: #333;
				font-size: 36rpx;
				font-weight: bold;
			}

			&-rule {
				padding: 0 32rpx 0 20rpx;

				&-item {
					display: flex;
					margin-top: 50rpx;

					&-left {
						width: 64rpx;
						color: #333;
						font-size: 32rpx;
						font-weight: bold;
						position: relative;

						image {
							position: absolute;
							top: 16rpx;
							left: 2rpx;
							z-index: 0;
							width: 40rpx;
							height: 32rpx;
						}

						text {
							position: sticky;
							margin-left: 12rpx;
						}
					}

					&-right {
						flex: 1;
						color: #333;
						font-size: 28rpx;
						line-height: 40rpx;

						text {
							color: #ff6b11;
						}
					}

					&:first-child {
						margin-top: 0;
					}
				}
			}

			&-button {
				margin-top: 80rpx;
				padding: 0 40rpx;

				button {
					@include Db_commonButton(88rpx, 24rpx);

					background: #ff6b11;

					&:active {
						background: rgba(255, 107, 17, 0.7);
					}
				}
			}
		}

		&-close {
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin: 30rpx;
			}
		}
	}
}
</style>
